⭐ 任務說明

😸 元件中會依照不同的條件而顯示不同的內容，這一次的任務我們就來看要怎麼執行吧！

條件渲染元件

在前一個任務中，學到元件之間可以透過 props 傳遞資訊，這邊可以增加一個屬性，用來判斷要顯示的樣式內容

我們在昨天的程式碼中，在 ImgList 增加 isShow

      <ImgList urlItem={{ name: "karakamin1" }} size={10} isShow={true} />
      <ImgList urlItem={{ name: "karakamin" }} size={250} isShow={false} />

• 程式碼內容

import "./styles.css";

function MyButton() {
  return <button className="btn-primary">karakamin 點我！這是按鈕啦！</button>;
}

function ImgList({ urlItem, size }) {
  return (
    <img
      src={`https://picsum.photos/${size}`}
      alt={urlItem.name}
      width={size}
    />
  );
}

export default function Page() {
  return (
    <div className="app">
      <h1 className="text-primary">React 大秘境</h1>
      <h2>DAY 06</h2>
      <h3>HEY! karakamin 你好！</h3>
      <MyButton />
      <ImgList urlItem={{ name: "karakamin1" }} size={100} isShow={true} />
      <ImgList urlItem={{ name: "karakamin" }} size={250} isShow={false} />
    </div>
  );
}

• 顯示結果
  

😸 嘿冒險者是不是想說，那這樣有判斷什麼呢？看起來都一樣
這邊還要再加點 if 魔法✨✨✨

我們在 ImgList 做點判斷處理，讓他可以依照 isShow 的判斷 return 不同的樣式

function ImgList({ urlItem, size, isShow }) {
  if (isShow) {
    return (
      <img
        src={`https://picsum.photos/${size}`}
        alt={urlItem.name}
        width={size}
      />
    );
  }
  return (
    <img
      src={`https://picsum.photos/${size}`}
      alt={urlItem.name + "test"}
      width={size}
    />
  );
}

從結構可以觀察到，第二張圖片的 alt 的值是 karakamintest

😾 稍微有感覺了吧？我們再加個 display:none; 的樣式進來，當 isShow 為 false 時，就要帶上這個樣式

樣式已經先事先加到 Style.css 內，這邊就不再多加說明
這邊會稍微修改一下 ImgList 元件內 return 的樣式，當 isShow 為 false 時，加上 class 樣式

function ImgList({ urlItem, size, isShow }) {
  if (isShow) {
    return (
      <img
        src={`https://picsum.photos/${size}`}
        alt={urlItem.name}
        width={size}
      />
    );
  }
  return (
    <img
      class="d-none"
      src={`https://picsum.photos/${size}`}
      alt={urlItem.name + "test"}
      width={size}
    />
  );
}

來看看結果，第二張圖確實被加上 d-none 這一個樣式了

😸冒險者你這時候應該會想問，不要顯示的東西可以不渲染出來嗎？
當然可以！只要再元件中 return 的內容這樣寫👍

• 在我們的 ImgList 元件中，如果想要 isShow 為 false 時，不需要渲染畫面出來，那就 return null

function ImgList({ urlItem, size, isShow }) {
  if (isShow) {
    return (
      <img
        src={`https://picsum.photos/${size}`}
        alt={urlItem.name}
        width={size}
      />
    );
  }
  return null;
}

來看看最後渲染的結果，從結構中就看不到那一個區塊了

三元運算子

😸 這邊還可以再修改一下，在 ImgList 元件的判斷式中，可以使用三元運算子來呈現

function ImgList({ urlItem, size, isShow }) {
  return isShow ? (
    <img
      src={`https://picsum.photos/${size}`}
      alt={urlItem.name}
      width={size}
    />
  ) : null;
}

關於 return null 的這件事

😸 在官方文件中有提到，return null 是比較不常見，那我們可以怎麼調整呢
這邊使用 && ，那麼這邊代表什麼意思呢？

• 這邊的寫法的意思是，當 isShow 為 ture 時，就把樣式渲染出來，否則就不渲染

function ImgList({ urlItem, size, isShow }) {
  return isShow && (
    <img
      src={`https://picsum.photos/${size}`}
      alt={urlItem.name}
      width={size}
    />
  );
}

😸 這也是 ES 6 的語法之一呦，學會了嗎？

結語

😸可以做的變化越來越多種，繼續推進囉！我們下個任務見